<template>
    <div>
        <div id="graph-chart-d" class="graph-chart"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts/core';
import {TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,LineChart,CanvasRenderer,UniversalTransition]);
import options  from './options'

/**
 * echarts  配置参考 https://echarts.apache.org/examples/zh/editor.html?c=line-stack
 * 按需引入降低打包体积，
 * 缺实际接口参数，数据处理由前端完成，带后端开发
 */
export default {

    data() {
        return {
            chart: {},
            options: options
        }
    },
    mounted() {
        var chartDom = document.getElementById('graph-chart-d');
        this.chart = echarts.init(chartDom);
        this.chart.setOption(this.options);
    },
    methods: {
        /**
         * 重新加载charts
         */
        resetChart() {
            this.chart.clear();
            this.chart.setOption(this.options);
            console.log('折线图重置成功')
        }
    }
}

</script>

<style scoped>
.graph-chart {
    height: 320px;
}
</style>